{extend name="base"/}
{block name="title"}拖动{/block}
{block name="resource"}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
      crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
        integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
        crossorigin=""></script>
<style>
    .map{
        height:100vw;
        width:100vw;
    }
</style>
{/block}
{block name="body"}
<div id="mapid" class="map"></div>
{/block}
{block name="script"}
<script type="text/javascript">
    //实例化地图
    var mapid = 'mapid';//div的id
    //var mapid = document.getElementById('mapid');//div文档对象
    var mymap = L.map(mapid,{
        center:[39.89866650195229,116.39170289039613],//[纬度，经度] 当前位置为北京故宫
        zoom:15,//地图放大级别
    });

    //瓦片图层
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);
</script>
<script type="text/javascript" src="ROOT_PATH/static/js/learn/leaflet/marker.js"></script>
<script type="text/javascript" src="ROOT_PATH/static/js/learn/leaflet/popup.js"></script>
{/block}

